<template>
  <view class="goods_container">
    <view class="container_item">
      <slot></slot>
      <view class="original" @click.stop="clickJumpInfo()">
        <image v-if="item.inform" :src="item.inform" class="img inform_announcement"></image>
        <!-- <image :class="item.quantity ?'':'sellOut_container-img'"
				:src="item.original?item.original:staticUrl()+'/home/defaultImg.png'" class="img" /> -->
        <view class="img">
          <ImageCache :class="item.quantity ? '' : 'sellOut_container-img'"
            :src="item.original ? item.original : staticUrl() + '/home/defaultImg.png'" />
        </view>
        <view class="custom_box" v-if="item.estimated && item.estimated.price && hasToken()">
          <image :src="staticUrl() + '/new/estimated.png'"></image>
          <view class="copywriting">{{ item.estimated.describe }}</view>
          <view class="custom_prices">
            <view class="txt"> {{ item.estimated.title }} </view>
            <view class="price"> <text>￥</text> {{ item.estimated.price }} </view>
          </view>
        </view>
      </view>
      <view class="info" @click.stop="clickJumpInfo()">
        <view class="goodsName singleRowEllipsis">{{ item.goodsName }}</view>
        <view class="simpleSpecs">规格：{{ item.simpleSpecs }}</view>
        <view class="expirationDate">
          <img :src="staticUrl() + '/home/expirationDate.png'" class="_icon" />
          <text v-if="!type">{{ item.expirationDate }}</text>
          <text v-else>{{ item.manufactureDate }}</text>
        </view>
        <view class="manufacturer singleRowEllipsis">
          <img :src="staticUrl() + '/home/manufacturer.png'" class="_icon" />
          <text>{{ item.manufacturer }}</text>
        </view>
        <!-- <view class="activityType">
        <text v-if="item.promotionList || item.promotionType">
          {{ item.promotionList[0].promotionName ? item.promotionList[0].promotionName : item.promotionType ? promotionTypeText(item.promotionType) : '' }}
          {{promotionTypeText(item.promotionType)  || item.promotionList[0].promotionName}}
        </text>
      </view> -->
        <view v-if="item.promotionMethods.length">
          <span class="ephedrine" v-if="item.ephedrine">含麻</span>
          <text v-for="(n, m) in item.promotionMethods" :key="m"
            :class="n.promotionType === 'COUPON' ? 'voucher' : 'seckillType'">
            {{ n.promotionType === 'COUPON' ? '券' : n.name }}
          </text>
        </view>
        <view class="promotionPrice" v-if="hasToken()">
          <view v-if="item.price || item.promotionPrice || item.originalPrice">
            <text>￥</text>
            <text>
              {{
              item.estimated ? item.price : item.promotionPrice ? item.promotionPrice : item.price
            }}
            </text>
            <text>/{{ item.goodsUnit }}</text>
          </view>
          <view v-else>
            <text>资质审核可见</text>
          </view>
          <image :src="staticUrl() + '/home/addCart.png'"
            v-if="item.price || item.promotionPrice || item.originalPrice">
          </image>
        </view>
        <view class="promotionPrice" v-if="!hasToken()"> <text> 登录可见 </text> </view>
      </view>
    </view>
    <view class="rules" @click="getRuleData(item)"
      v-if="hasToken() && item.rules && item.rules.length">
      <view>{{ item.rules[0] }}</view>
      <view>
        <uni-icons type="down" size="14" color="#8D8D8D"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
import dicts from '@/config/dicts.js'
import estimated from '@/components/estimated/index.vue'


export default {
  components: { estimated },
  props: {
    goodsId: {
      type: String,
      default: ''
    },
    item: {
      type: Object,
      default: () => { }
    },
    type: {
      type: String,
      default: ''
    }
  },
  methods: {
    getRuleData (item) {
      this.$emit('unfolding', item)
    },
    // 跳转 详情
    clickJumpInfo () {
      if (!this.type) {
        uni.navigateTo({ url: '/pages/goodsInfo/index?id=' + this.goodsId })
      }
    },
    promotionTypeText (val) {
      return dicts.goods_promotionType[val.trim()]
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_container {
  .container_item {
    display: flex;
    background: #fff;
    padding: 20rpx;
    margin: 16rpx 20rpx 0;
    border-radius: 16rpx;
    .original {
      margin-right: 30rpx;
      position: relative;
      display: inline-block;
      .img {
        width: 200rpx;
        height: 200rpx;
        margin-left: 20rpx;
        margin-top: 10rpx;
      }
      .custom_box {
        position: absolute;
        image {
          width: 240rpx;
          height: 51rpx;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        .copywriting {
          width: 110rpx;
          position: absolute;
          left: 120rpx;
          bottom: 4rpx;
          text-align: center;
          color: #ffffff;
          font-size: 18rpx;
          margin-bottom: 4rpx;
        }
        .custom_prices {
          line-height: 1;
          position: absolute;
          left: 8rpx;
          bottom: 6rpx;
          .txt {
            font-size: 12rpx;
            color: #ffffff;
          }
          .price {
            font-size: 22rpx;
            color: #ffffff;
            font-weight: bold;
            margin-top: 2rpx;
            text {
              font-size: 18rpx;
            }
          }
        }
      }
    }
    .info {
      width: 55%;
      margin-top: 10rpx;

      .goodsName {
        font-size: 26rpx;
        margin-bottom: 8rpx;
      }

      .simpleSpecs {
        font-size: 24rpx;
        margin-bottom: 8rpx;
        opacity: 0.6;
      }

      ._icon {
        width: 20rpx;
        height: 20rpx;
        vertical-align: middle;
        margin-right: 10rpx;
      }

      .expirationDate {
        font-size: 24rpx;
        margin-bottom: 6rpx;
        opacity: 0.6;
      }

      .manufacturer {
        font-size: 24rpx;
        opacity: 0.6;
      }

      .activityType {
        margin-top: 4rpx;

        text {
          font-size: 22rpx;
          // color: #ed1b19;
          // border: 1px solid #ed1b19;
          // padding: 4rpx 6rpx 0px;
          // border-radius: 6rpx;

          color: #fff;
          background: linear-gradient(-51deg, #ec1818, #fc7727);
          border-radius: 13rpx 13rpx 13rpx 0rpx;
          text-align: center;
          padding: 1rpx 0;
        }
      }

      .promotionPrice {
        font-size: 28rpx;
        margin-top: 18rpx;
        display: flex;
        justify-content: space-between;

        image {
          width: 36rpx;
          height: 36rpx;
        }

        text {
          color: #ef231b;
        }

        text:nth-child(1) {
          font-size: 22rpx;
        }

        text:nth-child(2) {
          font-size: 33rpx;
        }

        text:nth-child(3) {
          font-size: 22rpx;
          color: #8d8d8d;
        }
      }
    }
  }
  .rules {
    height: 64rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #8d8d8d;
    background: #fff;
    padding: 0 24rpx;
    margin: 0 20rpx;
    border-radius: 16rpx;
    border-top: 1px solid #f9f9f9;
  }
}
</style>
